<template>
  <div class="tab">
    <!-- <div navdata="选项1,选项2,选项3,选项4"></div> -->
    <!-- :curIdx="curIdx" -->
    <!-- <tab-nav :navData="navData"></tab-nav> -->
    <nav-bar
      :navData="navData"
      :curIdx="tabIndex"
      @changeTabIndex="changeTabIndex"
    ></nav-bar>

    <!-- <div contentdata="页面1,页面2,页面3,页面4"></div> -->
    <tab-content :contentData="contentData"></tab-content>
  </div>
</template>

<script>
import TabNav from "../../libs/myUI/NavBar/index.vue";
import TabContent from "./Content/index.vue";

import navData from "../../data/nav";
import contentData from "../../data/content";

import { mapState, mapMutations } from "vuex";

// import myUI from "../../libs/myUI/index";

export default {
  name: "Tab",
  components: {
    TabNav,
    TabContent,
  },
  // mixins: [myUI],
  data() {
    return {
      navData: navData,
      contentData: contentData,
      // curIdx: 0,
    };
  },
  computed: {
    ...mapState(["tabIndex"]),
  },
  methods: {
    ...mapMutations(["changeTabIndex"]),
  },
  // mounted() {
  //   console.log(this);
  // },
};
</script>

<style lang="scss" scoped>
.tab {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  border: 1px solid #000;
}
</style>